<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-2d变形</title>
    <style>
        .main{
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }
        .main > div{
            display: inline-block;
            width: 120px;
            height: 120px;
            text-align: center;
            line-height: 120px;
            background: #ffb093;
            margin: 30px;
        }
        .div2{
            transform: translate(20px,30px);
        }
        .div3{
            transform: rotate(-30deg);
        }
        .div4{
            transform: skew(45deg);
            /*切斜角度逆时针*/
        }
        .div5{
            transform: scale(1.2);
        }
        .div6{
            transform:rotate(20deg) translate(30px,20px) skew(-10deg) scale(0.7) ;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="div1">原型</div>
    <div class="div2">位移translate</div>
    <div class="div3">旋转rotate</div>
    <div class="div4">倾斜skew</div>
    <div class="div5">修改尺寸scale</div>
    <div class="div6">transform</div>
</div>
</body>
</html>
